<template>
  <div>
    <el-dialog
      :title="specsInfo.isAdd ? '添加商品规格' : '修改商品规格'"
      :visible.sync="specsInfo.isShow"
      :before-close="cancel"
      center
    >
      <el-form :model="specsForm" :rules="rules" ref="specsForm">
        <el-form-item
          prop="specsname"
          label="规格名称"
          :label-width="formLabelWidth"
        >
          <el-input v-model="specsForm.specsname" autocomplete="off"></el-input>
        </el-form-item>
        <!--  -->

        <el-form-item
          label="规格属性"
          :label-width="formLabelWidth"
          v-for="(item, index) in arr"
          :key="index"
        >
          <!-- <template slot-scope="Item"> -->
          <div class="div">
            <el-input v-model="arr[index].value" autocomplete="off"></el-input>
            <el-button type="primary" v-if="index == 0" @click="push"
              >添加</el-button
            >
            <el-button type="danger" v-else @click="remove(arr[index])"
              >移除</el-button
            >
          </div>
          <!-- </template> -->
        </el-form-item>

        <el-form-item label="状态" label-width="120px" prop="status">
          <el-form-item>
            <el-switch
              v-model="specsForm.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="2"
            >
            </el-switch>
          </el-form-item>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// split  是字符串分割成數組

// splice

import { specsadd, specsinfo, specsedit } from "../../require/api";
// import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      specsForm: {
        specsname: "",
        attrs: "",
        status: 1,
      },
      // attrs里面的属性
      arr: [{ value: "" }],
      formLabelWidth: "120px",
      //规则验证
      rules: {
        specsname: [
          { required: true, message: "请输入规格名称", trigger: "blur" },
        ],
      },
    };
  },
  props: ["specsInfo"],
  methods: {
    // ...mapActions({ getSpecsAction: "specs/getSpecsAction" }),
    // 添加attrs
    push() {
      // 判断属性添加的条数
      if (this.arr.length > 4) {
        this.$message.warning("已经到达上限，不能再调加了！！！");
      } else {
        this.arr.unshift({ value: "" });
      }
      // console.log(this.arr);
    },
    //移除
    remove(item) {
      // console.log(item);
      var index = this.arr.indexOf(item);
      if (index !== -1) {
        this.arr.splice(index, 1);
        // console.log(this.arr);
      }
    },
    //重置
    reset() {
      //表单内容清空
      this.specsForm = {
        specsname: "",
        attrs: "",
        status: 1,
      };
      //
      this.arr = [{ value: "" }];
      // 验证清空
      this.$refs.specsForm.resetFields();
    },
    // 取消
    cancel() {
      // 弹框消失
      this.$emit("cancel", false);
      // 内容清空
      this.reset();
    },
    //数据回显
    lookup(id) {
      console.log(id);
      //请求一条数据
      specsinfo({ id }).then((res) => {
        console.log(res);

        if (res.code == 200) {
          this.arr = res.list[0].attrs.map((item) => {
            return {
              value: item,
            };
          });
          this.specsForm = res.list[0];
        }
      });
    },
    // 确认
    confirm() {
      // console.log(this.arr);
      //先将添加的属性赋值为attrs 转为字符串格式
      let attrs = this.arr.map((item) => item.value);
      // attrs.toString();
      // console.log(attrs.toString());
      this.specsForm.attrs = attrs.join();
      // console.log(this.specsForm.attrs);
      // console.log(this.specsForm,'this.specsForm----');
      console.log(this.specsInfo.isAdd);
      if (this.specsInfo.isAdd) {
        // 新增属性
        specsadd(this.specsForm).then((res) => {
          // console.log(res)
          if (res.code == 200) {
            //成功提示
            this.$message.success(res.msg);
            // 清空 // 关闭弹窗
            this.cancel();
            // 更新页面
            // this.getSpecsAction();
            this.$store.dispatch("specs/getSpecsAction");
            // 更新页码
            this.$store.dispatch("specs/getCountAction");
          } else {
            //失败提示
            this.$message.error(res.msg);
          }
        });
      } else {
        // 修改属性
        specsedit(this.specsForm).then((res) => {
          console.log(res);
          if (res.code == 200) {
            // 关闭弹窗
            this.cancel();
            // 更新页面
            this.$store.dispatch("specs/getSpecsAction");
            this.$store.dispatch("specs/getCountAction");
            //成功提示
            this.$message.success(res.msg);
          } else {
            //失败提示
            this.$message.error(res.msg);
          }
        });
      }
    },
  },
  computed: {
    // ...mapGetters({ specsList: "apecs/getSpecs" }),
  },
  mounted() {
    // this.getSpecsAction();
  },
};
</script>
<style lang=less scoped >
.btn {
  /* margin-left: 15px; */
  margin-left: 10px;
  margin-bottom: 15px;
}
.div {
  display: flex;
}
</style>
